<head th:fragment="headerCss">
    <meta charset="utf-8">
    <title>湖南金职伟业母婴护理有限公司</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content=""/>
    <meta name="description"
          content="湖南金职伟业母婴护理有限公司"/>
    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <!-- Bootstrap CSS File -->
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/examination/common.css">
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        .marR10 {
            width: 20px;
            height: 20px;
            display: block;
            float: left;
            margin: 5px 10px 0 0;
        }

        .mar10:hover {
            background: #efefef;
        }

        label {
            display: block
        }

        a {
            color: #666;
        }
    </style>
</head>
<body class="signin" style="overflow-x: hidden">
<div class="signinpanel">
    <div style="border-bottom: 1px solid #efefef;display: flex;justify-content:space-around">
        <div class="h1_1" id="showtime" style="border-bottom:none;padding-top: 60px"></div>
        <div style="display: flex;margin-left: 280px">
            <div style="font-size:18px;margin-right: 10px ">
                <div class="mar10" id="roomNumber"></div>
                <div class="mar10" id="seatNumber"></div>
                <div class="mar10" id="name"></div>
                <div class="mar10" id="ticketNumber"></div>
                <div class="mar10" id="idCard"></div>
            </div>
            <div>
                <!--<img id="photo" src="" style="width: 147px;height:206px;margin: 10px 0"/>-->
            </div>
            <div>
                <button class="btn btn-block" id="next" style="width:80px;margin: 10px" onclick="reload();">刷新</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-9" style="border-right: 1px solid #e4e4e4;">
            <div class="login_panel" style="margin: auto;width: 900px;font-size:20px;">
                <!--<div>-->
                <!--<div class="mar40">一、单选题（共60题）</div>-->
                <!--</div>-->
                <!--<form id="signupForm">-->
                <!--<input type="hidden" name="stuSignId" id="stuSignId" />-->
                <!--<input type="hidden" name="epaperId" id="epaperId" />-->
                <div id="content" style="margin-top:40px">
                </div>
                <!--</form>-->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="rt_content">
                <div class="rt_content_tt">
                    <h2>答题卡</h2>
                </div>
                <div class="rt_content_nr answerSheet">
                    <ul id="answer"></ul>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top: 40px">
        <div class="div-1" id="process" style="text-align: center">
            
        </div>
        <div class="div-1">
            <input class="btn btn-block not-allowed" id="sub"
                   disabled="true" onclick="question();" value="交卷"/>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">
    document.oncontextmenu = new Function("event.returnValue=false");
    document.onselectstart = new Function("event.returnValue=false");

    //f5、f12、f11禁用
    document.onkeydown = function (e) {
        var ev = window.event || e;
        var code = ev.keyCode || ev.which;
        if (code == 116 || 123 || 122 || 115) {
            if (ev.preventDefault) {
                ev.preventDefault();
            } else {
                ev.keyCode = 0;
                ev.returnValue = false;
            }
        }

        if ((window.event.altKey) &&
            ((window.event.keyCode == 37) || //屏蔽Alt+方向键←
                (window.event.keyCode == 39))) { //屏蔽Alt+方向键→
            event.returnValue = false;
        }
        if ((event.keyCode == 8) || //屏蔽退格删除键
            (event.keyCode == 116) || //屏蔽F5刷新键
            (event.ctrlKey && event.keyCode == 82)) { //Ctrl+R
            event.keyCode = 0;
            event.returnValue = false;
        }
        if (event.keyCode == 27) {
        	event.keyCode = 0;
            event.returnValue = false;
        }
        if (event.keyCode == 122) {
            event.keyCode = 0;
            event.returnValue = false;
        } //屏蔽F11
        if (event.ctrlKey && event.keyCode == 78) event.returnValue = false; //屏蔽Ctrl+n
        if (event.shiftKey && event.keyCode == 121) event.returnValue = false; //屏蔽shift+F10
        if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
            window.event.returnValue = false; //屏蔽shift加鼠标左键新开一网页
        if ((window.event.altKey) && (window.event.keyCode == 115)) { //屏蔽Alt+F4
            window.showModelessDialog("about:blank", "", "dialogWidth:1px;dialogheight:1px");
            return false;
        }
    };
    var exam = JSON.parse(window.localStorage.getItem("exam"));
    var info = JSON.parse(window.localStorage.getItem("info"));
    var dates = JSON.parse(window.localStorage.getItem("dates"));//
    var dates1 = dates * 60;

    var allowNum = info.allowNum; // 允许三次切屏，超过则提交

        window.onblur = function() {
        	//var el = document.documentElement;
            //这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
            //fullScreen(el);
            if(allowNum < 1) {
                submit()
            }
            allowNum--;
            layer.confirm("你已切屏，注意切屏次数过多将会强制交卷！！！", {
                btn: ['确定', '取消']
            });
        };

    window.onclick = document.onclick = function (e) {
        var el = document.documentElement;
        //这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
        fullScreen(el);
    };

    function fullScreen(el) {
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||

            el.mozRequestFullScreen || el.msRequestFullScreen;

        if (typeof rfs != "undefined" && rfs) {

            rfs.call(el);

        } else if (typeof window.ActiveXObject != "undefined") {

            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏

            var wscript = new ActiveXObject("WScript.Shell");

            if (wscript != null) {

                wscript.SendKeys("{F11}");

            }

        }
    }

    

    $('#sub').attr("title" , "考试时间大于"+dates+"分钟才能交卷！");

    //题目总数
    var allsubject = '';
    var index = 0;
    $(function () {
       // $("#roomNumber").html("考场号：" + info.roomNumber);
       // $("#seatNumber").html("座位号：" + info.seatNumber);
        $("#name").html("姓名：" + info.name);
        $("#idCard").html("考生编号：" + info.idCard);
        $("#ticketNumber").html("准考证号：" + info.ticketNumber);
        //$("#photo").attr("src", info.photo);
        $("#stuSignId").val(info.stuSignId);
        $("#epaperId").val(exam.id);
        //倒计时
         $.ajax({
        	 type: "POST",
            url:"/jzApi/examinations/getNowDateTime",
            data: {},
            success: function (r) {
               //console.log("map =" , r.data.endTime);
                window.localStorage.setItem("nowDate",r);
                countDown();
            }
        });
        

        function addZero(i) {
            return i < 10 ? "0" + i : i + "";
        }

        function countDown() {
        	
        	var nowTime = new Date(window.localStorage.getItem("nowDate").replace(/-/g,"/"));
            window.localStorage.setItem("nowDate",new Date(nowTime.getTime()+1000));
             var info = JSON.parse(window.localStorage.getItem("info"));
             //监督员设置了延时
             if(info.endDate !=undefined){
                var endTime = new Date(info.endDate.replace(/-/g, "/")); //考试结束时间
                  //console.log("endTime11",endTime)
            }else{
              var endTime = new Date(JSON.parse(window.localStorage.getItem("intro")).endTime.replace(/-/g, "/")); //考试结束时间
            }
            if(window.localStorage.getItem("endTime") !=undefined){
                var endTime =new Date(window.localStorage.getItem("endTime").replace(/-/g, "/"));
            }
            var leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
            // var d = parseInt(lefTtime / (24*60*60))
            var h = parseInt(leftTime / (60 * 60) % 24);
            var m = parseInt(leftTime / 60 % 60);
            var s = parseInt(leftTime % 60);
            // d = addZero(d)
            h = addZero(h);
            m = addZero(m);
            s = addZero(s);
            document.querySelector("#showtime").innerHTML = '考试倒计时 ' + h + '时' + m + '分' + s + '秒';
            if (leftTime <= dates1) {
                $("#sub").attr("disabled", false);
                $("#sub").removeClass("not-allowed");
            }
            if (leftTime < 0) {
                submit();
                return
            }
            setTimeout(countDown, 1000);
        }

        getData(0);
        //渲染答题卡选中状态
        $('.mar10').click(function () {
            var that = $(this);
            var examId = that.parents('.titleEaxm').attr('data-id');
            var type = that.parents('.titleEaxm').attr('type');
            /*根据题目ID找到对应答题卡*/
            var cardLi = $('li[data-id=' + examId + ']');
            //多选题
            if (type == 1) {
                var a = true;//控制答题卡是否选中
                var b = false;//判断选项是否选中
                if (!that.find("input").prop('checked')) {
                    that.siblings(".mar10").each(function () {
                        //选择了一个选项则为true
                        if ($(this).find("input").prop('checked')) {
                            b = true
                        }
                    });

                } else {
                    b = true;
                }
                if (a) {
                    if (b) {
                        cardLi.addClass('hasBeenAnswer');
                    } else {

                        cardLi.removeClass('hasBeenAnswer');
                    }
                } else {
                    cardLi.removeClass('hasBeenAnswer');
                }
            } else {

                if (!cardLi.hasClass('hasBeenAnswer')) {

                    cardLi.addClass('hasBeenAnswer');
                }
            }
        });
        //
        //点击答题卡跳转题目
        $('.anLi').click(function () {
            // var examId = $(this).attr('data-id');
            // /*选中题目ID*/
            // var cardLi = $('div[data-id=' + examId + ']');
            // /*根据题目ID找到对应答题卡*/
            // cardLi.addClass('contentBoxShow');
            // cardLi.removeClass('contentBoxHide');
            // cardLi.siblings().addClass('contentBoxHide');
            // cardLi.siblings().removeClass('contentBoxShow');
            index = $(this).attr('data-index');
            toGo(index)
        });
        //答案存入缓存
        $("input").change(function () {
            var answerList = [];
            var subject = '';
            $('.titleEaxm').each(function (i, res) {
                var that = $(this);
                var che = '';
                var type = that.find("input").attr("type");
                //单选、判断
                if (type == 'radio') {
                    var rad = '';
                    if (that.find($('input:checked')).val() != '' && that.find($('input:checked')).val() != undefined) {
                        rad = that.find($('input:checked')).val().substring(0, 1)
                    }
                    answerList.push({id: that.attr("data-id"), value: rad});
                } else if (type == 'checkbox') { //多选
                    that.find('input:checkbox:checked').each(function (i) {
                        if ($(this).val() != '') {
                            che += $(this).val().substring(0, 1) + ';;'
                        }
                        // che.push($(this).val());
                    });
                    answerList.push({id: that.attr("data-id"), value: che});
                }
                //进度显示
                if (that.find($('input:checked')).val() != undefined) {
                    subject = subject * 1 + 1
                }
            });
            //题目完成进度
            var process = (subject / allsubject) * 100;
            $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
            window.localStorage.setItem("answerList", JSON.stringify(answerList));
            //console.log("answerList",answerList)
            //未完成题目数量
            window.localStorage.setItem("incomplete", allsubject - subject);
        });
        //从缓存取出答案、遍历到页面
        var answerList = window.localStorage.getItem("answerList");
        if (null != answerList) {
            var subject = '';
            var answerListJSON = JSON.parse(answerList);
            //遍历题目
            $('.titleEaxm').each(function () {
                var that = $(this);
                for (var i = 0; i < answerListJSON.length; i++) {
                    //根据id找到对应题目
                    if (that.attr("data-id") == answerListJSON[i].id) {
                        if (answerListJSON[i].value != '') {
                            $('li[data-id=' + answerListJSON[i].id + ']').addClass('hasBeenAnswer');
                        }
                        //判断是否多选
                        if (answerListJSON[i].value.indexOf(";;") != -1) {
                            //遍历多选题答案
                            var valueList = answerListJSON[i].value.split(";;");
                            //遍历选项
                            that.find("input").each(function () {
                                for (var j = 0; j < valueList.length; j++) {
                                    //根据答案找到选项，并渲染选中效果到页面
                                    if ($(this).val().substring(0, 1) == valueList[j]) {
                                        $(this).attr("checked", "checked");
                                    }
                                }
                            });
                        } else {
                            that.find("input").each(function () {
                                //根据答案找到选项，并渲染选中效果到页面
                                if ($(this).val().substring(0, 1) == answerListJSON[i].value) {
                                    $(this).attr("checked", "checked");
                                }
                            });
                        }
                        break;
                    }
                }
                //进度显示
                if (that.find($('input:checked')).val() != undefined) {
                    subject = subject * 1 + 1
                }
            });
            //题目完成进度
            var process = (subject / allsubject) * 100;
              //未完成题目数量
            window.localStorage.setItem("incomplete", allsubject - subject);
            $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
        }else{
             window.localStorage.setItem("incomplete", allsubject);
        }

    });

    function question() {
        var incomplete = window.localStorage.getItem("incomplete");
        if (incomplete != 0 && incomplete != '0') {
            layer.confirm("还有"+incomplete+"道题未完成！可查看答题卡，确定要交卷？", {
                btn: ['确定', '取消']
            }, function (index, layero) {
                submit()
            }, function (index) {
            });
        } else {
            layer.confirm("确定要交卷？", {
                btn: ['确定', '取消']
            }, function (index, layero) {
                submit()
            }, function (index) {
            });
        }
    }

    //获取题目数据
    function getData(titleNumber) {
        var a = '<div>';//题目
        var c = '';//切换按钮
        var an = '';//答题卡
        allsubject = exam.questions.length;
        $("#process").html("共" + allsubject + "道题目，已完成0%");
        var arr =exam.questions;
        var t;
        for(var i = 0;i < arr.length; i++){
         var rand = parseInt(Math.random()*arr.length);
           t = arr[rand];
           arr[rand] =arr[i];
           arr[i] = t;
        }
        //console.log("arr",arr);
        arr.forEach(function (item, index, arr) {
            //渲染答题卡
            an += '<li class="anLi"  data-index="' + index + '" data-id="' + item.id + '"><a href="#">' + (parseInt(index)+1) + '</a></li>';

            //控制题目展示
            if (titleNumber == index) {
                f = 'contentBoxShow box'
            } else {
                f = 'contentBoxHide box'
            }
            var list = item.options.split(";;");
            //     var pre = index-1;
            //     var next = index+1;
            var last = arr.length - 1;
            var b = '', d = '', e = '';

            //判断题目类型，写入题目描述
            if (item.type == 0) {  //单选
                if (item.resourceType == 0) {

                //写入题目选项
                for (var i = 0; i < list.length; i++) {
                    b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                        + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                }
                a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（单选题）（' + item.score + '分）' + item.introduce + '</div>' + b;

                }else if(item.resourceType == 1){
                    //写入图片题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（单选题）（' + item.score + '分）' + item.introduce  + '<img style="width: 500px;height: auto;" src="'+item.resourceUrl+'">' +'</img>'+ '</div>' + b;


                }else if(item.resourceType == 2){
                    //写入题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（单选题）（' + item.score + '分）' + item.introduce + '</div>' + b;

                }
            }
            //判断题目类型，写入题目描述
            if (item.type == 2) { //判断
                if (item.resourceType == 0) {
                    //写入题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（判断题）（' + item.score + '分）' + item.introduce + '</div>' + b;

                }else    if (item.resourceType == 1) {
                    //写入题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（判断题）（' + item.score + '分）' + item.introduce + '<img style="width: 500px;height: auto;" src="'+item.resourceUrl+'">' +'</img>'+  '</div>' + b;

                }


            }
            if (item.type == 1) {  //多选
                if (item.resourceType == 0) {
                    //写入题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="checkbox" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（多选题）（' + item.score + '分）' + item.introduce + '</div>' + b;


                }else if(item.resourceType == 1){
                    //写入题目选项
                    for (var i = 0; i < list.length; i++) {
                        b += '<div class="mar10"><input type="checkbox" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                            + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                    }
                    a += '<div type="' + item.type + '" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '"><div>' + (parseInt(index)+1) + '、（多选题）（' + item.score + '分）' + item.introduce + '<img style="width: 500px;height: auto;" src="'+item.resourceUrl+'">' +'</img>'+  '</div>' + b;

                }

            }

            //当前题目为第一题则不能点击上一题，为最后一题不能点击下一题
            if (index == 0) {
                d = '<button class="btn btn-block not-allowed" disabled onclick="pre();">上一题</button>'
            } else {
                d = '<button class="btn btn-block" id="pre" onclick="pre();">上一题</button>'
            }
            if (index == last) {
                e = '<button class="btn btn-block not-allowed" disabled onclick="next();">下一题</button>'
            } else {
                e = '<button class="btn btn-block" id="next" onclick="next();">下一题</button>'
            }
            c = '<div class="div-1 changeBtn" style="display:flex;justify-content:space-between;margin:40px 0 100px 0">' +
                '<button class="btn btn-block" onclick="first();">第一题</button>' +
                d +
                e +
                '<button class="btn btn-block" onclick="last();">最后一题</button></div>';
            a += c;
            a += '</div>';
            // }
        });
        $("#content").html(a);
        $("#answer").html(an)  //答题卡
    }

    function toGo(index) {
        changeCss(index)
    }

    function first() {
        index = 0;
        changeCss(index)
    }

    function last() {
        index = exam.questions.length - 1;
        changeCss(index)
    }

    function next() {
        index = parseInt(index) + parseInt(1);
        changeCss(index)
    }

    function pre() {
        index = parseInt(index) - parseInt(1);
        changeCss(index)
    }
    //刷新考试结束时间
    function reload() {
        $.ajax({
            url:"/jzweb/exceptionAddtime/delayed",
            data: {stuId:JSON.parse(window.localStorage.getItem("info")).stuSignId,eBatchId:JSON.parse(window.localStorage.getItem("intro")).id },
            success: function (r) {
               //console.log("map =" , r.data.endTime);
                window.localStorage.setItem("endTime",r.data.endTime);
            }
        });
    }
    //控制题目展示
    function changeCss(index) {
        $('.box').each(function (i, res) {
            if (index == i) {
                $(this).addClass("contentBoxShow");
                $(this).removeClass("contentBoxHide");
            } else {
                $(this).addClass("contentBoxHide");
                $(this).removeClass("contentBoxShow")
            }
        });

    }

    //提交答卷
    function submit() {
        // var t = Math.round(Math.random());
        //0-9随机数
        var t = Math.floor(Math.random() * 10);
        //console.log("answerList", JSON.stringify(answerList));
        var answerList = window.localStorage.getItem("answerList");
        var id = layer.msg('提交中，请等待！', {
            icon: 16,
            shade: 0.4,
            time: false //取消自动关闭
        });
        setTimeout(function () {
            layer.close(id);
            $.ajax({
                type: "POST",
                url: "/jzApi/examinations/selAnswerSheet",
                data: {
                    stuSignId: info.stuSignId,
                    epaperId: exam.id,
                    answerList: answerList,
                    code: info.cookieCode
                },
                success: function (r) {
                    //console.log("r",r)
                    if (r.code == 0) {
                        //提交试卷后清除缓存
                        localStorage.removeItem("info");
                        localStorage.removeItem("exam");
                        localStorage.removeItem("intro");
                        localStorage.removeItem("answerList");
                        localStorage.removeItem("endTime");
                        localStorage.removeItem("dates");
                        localStorage.removeItem("incomplete");
                        localStorage.removeItem("times");
                        // localStorage.clear();
                        location.href = '/examination/endExam'
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        }, t * 1000);
    }
</script>

</body>





